<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">

    <title>汉心码学习训练系统</title>
    <!--<subtitle>汉心码学习训练系统 - 提高你的中文打字速度</subtitle>-->
    <meta name="keywords" content="汉心码, 辅助码, 汉心, 汉心码官网,拼音打字如何变快,拼音打字如何不用选字">
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .header {
        background: linear-gradient(to right, #4cbf30 -30%, #0f9d58);
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        color: #fff;
      }
      .container {
        max-width: 600px;
        margin: 50px auto;
        background-color: #fff;
        padding: 50px;
        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
      h2 {
        text-align: center;
        margin-bottom: 30px;
        color: #343a40;
      }
      .question-container {
        text-align: center;
        font-size: 24px;
        margin-bottom: 30px;
      }
      input[type="text"] {
        width: 96%;
        padding: 10px;
        font-size: 20px;
        border: 1px solid #ced4da;
        border-radius: 5px;
        outline: none;
        transition: border-color 0.2s ease-in-out;
      }
      input[type="text"]:focus {
        border-color: #0f9d58;
      }
      .invalid-feedback {
        display: none;
        color: #dc3545;
        font-size: 14px;
        margin-top: 5px;
      }
      .result-container {
        text-align: center;
        font-size: 24px;
        margin-top: 30px;
      }
      .btn-container {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
      }
      .btn {
        width: 48%;
        padding: 10px;
        font-size: 20px;
        background-color: #ffffff;
        color: rgb(24, 24, 24);
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        border: 1px solid rgb(233, 232, 232);
        box-shadow: 1px 1px 5px rgba(136, 136, 136, 0.2);


  
      }
      .btn:hover {
        background-color: #12b466;

      }
      .footer {
        text-align: center;
        font-size: 14px;
        margin-top: 30px;
      }
      .welcome {
        text-align: center;
        font-size: 24px;
        margin-top: 20px;
      }
      .greeting {
        margin-top: 20px;
        font-size: 24px;
        text-align: center;
      }
      a {
        text-decoration: none;
        color: #0f9d58;
      }
      a:hover {
        text-decoration: none;
        color: #da0024;
        border-bottom: none;
      }
      #question-number, #result {
        color: #0f9d58;
      }
      .daohang {
        text-align: center;
        margin-top: 50px;
        font-size: 18px;
      }
      .xiaozi {
        width: 666px;
        margin: 0 auto;
        text-align: center;
        color: gray;
        font-size: 14px;
      }
    </style>

  </head>
  <body>
    <div class="header">
      <h1>汉心码字元(字根)基本课</h1>
      
    </div>

 <div  align="center"> <h4> <a href="https://hanxinma.gitlab.io/2022/01/01/xue-xi-mu-lu/" style="border-bottom: none;" target="_blank">🗺️视频巧记字元---</a>记忆字根,第一步,把视频看一遍。第二步，把下方题目训练一遍</div>
  <div  align="center"> 也可以不学，如遇到疑惑可用拼音或双拼+oopp查编码来使用。或选择用易学码。</div>
   <div  align="center">  </div>
    <div class="container">
      <h2 id="question-number"></h2>
      <div class="question-container">
        <p id="question"></p>
      </div>
      <div class="answer-container">
        <input type="text" id="answer" placeholder="请输入答案" onkeydown="if(event.keyCode===13) checkAnswer()" autocomplete="off">
        <div class="invalid-feedback">请输入答案</div>
      </div>
      <div class="result-container">
        <p id="result"></p>
      </div>
      <div class="btn-container">
      
        <button class="btn" onclick="skipQuestion()">跳过</button>
        <button class="btn" onclick="checkAnswer()">提交</button>
      </div>
    </div>
    <div class="xiaozi">
      <p>训练系统可以让你更快更好的掌握汉心码，建议字根训练和规则训练要做一下，注意的字，不一定要做，那个很难</p>

   
                      
                                    <details>
                                        <summary>点击我查看字元图(字根部件)</summary>
                                        有些字元不在表上，是音托，比如，被[礻又] ，又表上没有，就是音托在表外，在y上。表上没标。
<img src="" alt="码表" style="max-width:99%; max-height:1000px;" />                        
                       </br>
                          记忆技巧：  <a href=" https://www.bilibili.com/video/BV1Ru4y157PZ/" style="border-bottom: none;" target="_blank"><strong>▶️视频版字根记忆技巧</strong></a>
                           </br> w上的囗 wei字口，所以是w 。亠 ，记忆文字头所以是w
                           </br> e上的尔字头,所以是e。d上也有很多点,e上也有很多点.记忆横向e的点在d键的上方。
                           </br>日月和o很像所以是o
                            </br>爫记忆技巧第一笔是撇，所以是p。衤衣字旁，和漂亮有关,所以是p
                             </br>一丨记忆和A里有横和竖
                             </br>  山字记忆平舌s
                              </br>扌记忆扶手
                               </br>冖宀记忆锅盖字头，盖住其他字的意思。
                                </br>衣子底,记忆在衣字y键下面,所以是衣字底在y键下面h上.
                                 </br>匚字记忆成框所以是k，他和k也很像。
                                  </br>木记忆成和林有关,所以是L
                                   </br>朩记忆和小有关,他里面有小字，所以是x
                                    </br>㔾厶记忆和折有关,所以是zh-v
                                    


                                    </details>



                         
    
    <div class="daohang">
      <a href="https://hanxinma.gitlab.io/" style="border-bottom: none;" target="_blank">去首页</a>
      <a href="./zy.html" style="border-bottom: none;" target="_blank">字元训练</a>
      <a href="./gz.html" style="border-bottom: none;" target="_blank">规则训练</a>
      <a href="./zyi.html" style="border-bottom: none;" target="_blank">注意的字训练</a>
      <a href="https://hanxinma.gitlab.io/2023/03/01/pin-yin-han-xin-yong-fa/" style="border-bottom: none;" target="_blank"><strong>全拼版学习</strong></a>
      <a href="    https://hanxinma.gitlab.io/2023/03/30/shuang-pin-han-xin-de-yong-fa/" style="border-bottom: none;" target="_blank">双拼版学习</a>
            <a href="https://support.qq.com/product/607360" style="border-bottom: none;" target="_blank">学习交流频道</a>
      
      
      <br>  <br>  <br> <br>  <br>  <br>
    </div>

    <script>
      var dataArray = [


"红[纟工]这个字是哪两个首尾键位，小写字母两个.,sg,如果你不知道，点击下方的字元字根图",
"优[亻尤]这个字是哪两个首尾键位，小写字母两个.,ry,如果你不知道，点击下方的字元字根图",
"围[囗韦]这个字是哪两个首尾键位，小写字母两个.,ww,如果你不知道，点击下方的字元字根图",
"文[亠乂]这个字是哪两个首尾键位，小写字母两个.,wx,如果你不知道，点击下方的字元字根图",
"枚[木攵]这个字是哪两个首尾键位，小写字母两个.,lw,如果你不知道，点击下方的字元字根图",
"尔[⺈小]这个字是哪两个首尾键位，小写字母两个.,ex,如果你不知道，点击下方的字元字根图",
"鱼[⺈一]这个字是哪两个首尾键位，小写字母两个.,ea,如果你不知道，点击下方的字元字根图",
"叩[口卩]这个字是哪两个首尾键位，小写字母两个.,ke,如果你不知道，点击下方的字元字根图",
"学[⺍子]这个字是哪两个首尾键位，小写字母两个.,ez,如果你不知道，点击下方的字元字根图",
"黑[丨灬]这个字是哪两个首尾键位，小写字母两个.,ae,如果你不知道，点击下方的字元字根图",
"单[丷丨]这个字是哪两个首尾键位，小写字母两个.,ea,如果你不知道，点击下方的字元字根图",
"捷[扌人]这个字是哪两个首尾键位，小写字母两个.,fr,如果你不知道，点击下方的字元字根图",
"孩[子人]这个字是哪两个首尾键位，小写字母两个.,zr,如果你不知道，点击下方的字元字根图",
"酒[氵酉]这个字是哪两个首尾键位，小写字母两个.,dy,如果你不知道，点击下方的字元字根图",
"泰[一氺]这个字是哪两个首尾键位，小写字母两个.,au,如果你不知道，点击下方的字元字根图",
"幸[土十]这个字是哪两个首尾键位，小写字母两个.,tu,如果你不知道，点击下方的字元字根图",
"有[一月]这个字是哪两个首尾键位，小写字母两个.,ao,如果你不知道，点击下方的字元字根图",
"爱[爫又]这个字是哪两个首尾键位，小写字母两个.,py,如果你不知道，点击下方的字元字根图",
"被[礻又]这个字是哪两个首尾键位，小写字母两个.,py,如果你不知道，点击下方的字元字根图",
"杉[木彡]这个字是哪两个首尾键位，小写字母两个.,lp,如果你不知道，点击下方的字元字根图",
"邦[一阝]这个字是哪两个首尾键位，小写字母两个.,ae,如果你不知道，点击下方的字元字根图",
"岭[山龴]这个字是哪两个首尾键位，小写字母两个.,sv,如果你不知道，点击下方的字元字根图",
"罢[罒厶]这个字是哪两个首尾键位，小写字母两个.,sv,如果你不知道，点击下方的字元字根图",
"缺[缶乀]这个字是哪两个首尾键位，小写字母两个.,fn,如果你不知道，点击下方的字元字根图",
"越[土戈]这个字是哪两个首尾键位，小写字母两个.,tg,如果你不知道，点击下方的字元字根图",
"农[丶衣底部]这个字是哪两个首尾键位，小写字母两个.,dh,如果你不知道，点击下方的字元字根图",
"区[匚乂]这个字是哪两个首尾键位，小写字母两个.,kx,如果你不知道，点击下方的字元字根图",
"林[木木]这个字是哪两个首尾键位，小写字母两个.,ll,如果你不知道，点击下方的字元字根图",
"跳[⻊兆]这个字是哪两个首尾键位，小写字母两个.,zv,如果你不知道，点击下方的字元字根图",
"杀[乂朩]这个字是哪两个首尾键位，小写字母两个.,xx,如果你不知道，点击下方的字元字根图",
"要[西女]这个字是哪两个首尾键位，小写字母两个.,xn,如果你不知道，点击下方的字元字根图",
"革[廿丨]这个字是哪两个首尾键位，小写字母两个.,ca,如果你不知道，点击下方的字元字根图",
"已[乛ㄥ]这个字是哪两个首尾键位，小写字母两个.,vv,如果你不知道，点击下方的字元字根图",
"乙[乛ㄥ]这个字是哪两个首尾键位，小写字母两个.,vv,如果你不知道，点击下方的字元字根图",
"九[丿ㄥ]这个字是哪两个首尾键位，小写字母两个.,pv,如果你不知道，点击下方的字元字根图",
"事[一乛]这个字是哪两个首尾键位，小写字母两个.,av,如果你不知道，点击下方的字元字根图",
"习[乛冫]这个字是哪两个首尾键位，小写字母两个.,vd,如果你不知道，点击下方的字元字根图",
"竭[立ㄥ]这个字是哪两个首尾键位，小写字母两个.,lv,如果你不知道，点击下方的字元字根图",
"鼎[目乛]这个字是哪两个首尾键位，小写字母两个.,mv,如果你不知道，点击下方的字元字根图",
"今[人乛]这个字是哪两个首尾键位，小写字母两个.,rv,如果你不知道，点击下方的字元字根图",
"亏[二乛]这个字是哪两个首尾键位，小写字母两个.,ev,如果你不知道，点击下方的字元字根图",
"民[乛ㄥ]这个字是哪两个首尾键位，小写字母两个.,vv,如果你不知道，点击下方的字元字根图",
"以[ㄥ人]这个字是哪两个首尾键位，小写字母两个.,vr,如果你不知道，点击下方的字元字根图",
"气[丿ㄥ]这个字是哪两个首尾键位，小写字母两个.,pv,如果你不知道，点击下方的字元字根图",
"云[二厶]这个字是哪两个首尾键位，小写字母两个.,ev,如果你不知道，点击下方的字元字根图",
"卷[丶㔾]这个字是哪两个首尾键位，小写字母两个.,dv,如果你不知道，点击下方的字元字根图",
"父[八乂]这个字是哪两个首尾键位，小写字母两个.,bx,如果你不知道，点击下方的字元字根图",
"饮[饣人]这个字是哪两个首尾键位，小写字母两个.,ur,如果你不知道，点击下方的字元字根图",
"定[宀人]这个字是哪两个首尾键位，小写字母两个.,gr,如果你不知道，点击下方的字元字根图",
"罕[冖干]这个字是哪两个首尾键位，小写字母两个.,gg,如果你不知道，点击下方的字元字根图",
"到[至刂]这个字是哪两个首尾键位，小写字母两个.,vd,如果你不知道，点击下方的字元字根图",
"建[廴丨]这个字是哪两个首尾键位，小写字母两个.,za,如果你不知道，点击下方的字元字根图",
"过[辶寸]这个字是哪两个首尾键位，小写字母两个.,zc,如果你不知道，点击下方的字元字根图",
"等[⺮寸]这个字是哪两个首尾键位，小写字母两个.,vc,如果你不知道，点击下方的字元字根图",
"草[艹十]这个字是哪两个首尾键位，小写字母两个.,cu,如果你不知道，点击下方的字元字根图",
"疼[疒冬]这个字是哪两个首尾键位，小写字母两个.,bd,如果你不知道，点击下方的字元字根图",
"铁[钅失]这个字是哪两个首尾键位，小写字母两个.,ju,如果你不知道，点击下方的字元字根图",
"放[方攵]这个字是哪两个首尾键位，小写字母两个.,fw,如果你不知道，点击下方的字元字根图",
"幻[幺乛]这个字是哪两个首尾键位，小写字母两个.,sv,如果你不知道，点击下方的字元字根图",
"阳[阝日]这个字是哪两个首尾键位，小写字母两个.,eo,如果你不知道，点击下方的字元字根图",
"猫[犭田]这个字是哪两个首尾键位，小写字母两个.,qt,如果你不知道，点击下方的字元字根图",
"很[彳畏底部]这个字是哪两个首尾键位，小写字母两个.,rh,如果你不知道，点击下方的字元字根图",
"卫[卩一]这个字是哪两个首尾键位，小写字母两个.,ea,如果你不知道，点击下方的字元字根图,,小字元图不准,大版字根图,有明确标一样的字根",





      ];
      var totalQuestions = dataArray.length;
      var currentQuestion = 0;
      document.getElementById("question-number").innerHTML = "成字测试（字元)，第 " + (currentQuestion + 1) + " 题 / 共 " + totalQuestions + " 题";
      document.getElementById("question").innerHTML = dataArray[currentQuestion].split(",")[0];





var correctCount = 0; // 记录答对的题目数量
var firstAttemptCorrectCount = 0; // 记录第一次就答对的题目数量
var correctAnswers = {}; // 记录每个问题的正确答案，格式为 {question: answer}
var isFirstAttempt = true; // 标记是否是第一次尝试回答

function checkAnswer() {
    var input = document.getElementById("answer");
    var feedback = input.nextElementSibling;
    if (input.value.trim() === "") { // 如果输入的答案为空
        input.classList.add("is-invalid"); // 添加is-invalid类
        feedback.style.display = "block"; // 显示错误提示
    } else {
        input.classList.remove("is-invalid"); // 移除is-invalid类
        feedback.style.display = "none"; // 隐藏错误提示
        var currentQuestionText = dataArray[currentQuestion].split(",")[0];
        var correctAnswer = dataArray[currentQuestion].split(",")[1];
        if (input.value === correctAnswer && !correctAnswers.hasOwnProperty(currentQuestionText)) {
            document.getElementById("result").innerHTML = "恭喜你答对了！";
            setTimeout(function(){
                document.getElementById("result").innerHTML = "";
            }, 1000); // 1000毫秒 = 1秒钟

            correctCount++; // 答对的题目数量加1

            if (isFirstAttempt) {
                firstAttemptCorrectCount++; // 第一次就答对的题目数量加1
                isFirstAttempt = false; // 将标记设为false，表示已经回答过一次
            }

            correctAnswers[currentQuestionText] = correctAnswer; // 将本题答案加入已答对的答案列表

            currentQuestion++;
            if (currentQuestion < dataArray.length) {
                document.getElementById("question-number").innerHTML = "规则，第 " + (currentQuestion + 1) + " 题 / 共 " + totalQuestions + " 题";
                document.getElementById("question").innerHTML = dataArray[currentQuestion].split(",")[0];
                input.value = "";
                isFirstAttempt = true; // 进入下一题时重置标记为true，表示第一次尝试回答
            } else {
                document.getElementById("question-number").innerHTML = "完成！";
                document.getElementById("answer").style.display = "none";
                document.getElementById("result").style.display = "none";
                document.getElementById("question-number").style.display = "none";
                document.getElementsByClassName("btn")[0].style.display = "none";
                document.getElementsByClassName("btn")[1].style.width = "100%";
                
                
          var multipliedCount = Math.floor(firstAttemptCorrectCount * 1.6);
               var message;


if (multipliedCount > 80) {
  message = "恭喜学会了汉心码,点<a href='biye/biyegl.html'>这里可以拿奖状</a>！还可以继续学习规则,可以拿毕业证(下方点击规则训练)";

} else {
  message = "还需要继续学习哦！建议得分需要在80分以上。";
}


document.getElementById("question").innerHTML =  "答对的[得分]：" + multipliedCount +"分。"+message;
input.style.display = "none";



            }
        } else if (correctAnswers.hasOwnProperty(currentQuestionText)) {
            // 如果本题已经回答正确过了，不记录再次回答正确的情况
            document.getElementById("result").innerHTML = "你已经回答正确过了！请回答下一题。";
        } else {
            document.getElementById("result").innerHTML = dataArray[currentQuestion].split(",")[2];
            isFirstAttempt = false; // 如果第一次回答错误，将标记设为false，表示已经尝试过一次
        }
    }
}


      function skipQuestion() {
        currentQuestion++;
        if (currentQuestion < dataArray.length) {
          document.getElementById("question-number").innerHTML = "注意的字，第 " + (currentQuestion + 1) + " 题 / 共 " + totalQuestions + " 题";
          document.getElementById("question").innerHTML = dataArray[currentQuestion].split(",")[0];
          document.getElementById("answer").value = "";
          document.getElementById("result").innerHTML = "";
        } else {
          document.getElementById("question-number").innerHTML = "完成！";
          document.getElementById("answer").style.display = "none";
          document.getElementById("result").style.display = "none";
          document.getElementById("question-number").style.display = "none";
          document.getElementsByClassName("btn")[0].style.display = "none";
          document.getElementsByClassName("btn")[1].style.width = "100%";
          document.getElementById("question").innerHTML = "这批训练题已经没有了，请点下面下一批题目！";
          document.getElementById("answer").style.display = "none";
        }
      }
    </script>
 <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?8520e3c41904434f20741b02eaddde4b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

  </body>
</html>
